<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
                <el-form-item label="订单编号" prop="sn">
                    <el-input v-model="formData.sn" clearable placeholder="请输入订单编号" :disabled="mode == 'edit'"/>
                </el-form-item>
                <!-- <el-form-item label="用户id" prop="user_id">
                    <el-input v-model="formData.user_id" clearable placeholder="请输入用户id" />
                </el-form-item>
                <el-form-item label="支付编号-冗余字段，针对微信同一主体不同客户端支付需用不同订单号预留。" prop="pay_sn">
                    <el-input v-model="formData.pay_sn" clearable placeholder="请输入支付编号-冗余字段，针对微信同一主体不同客户端支付需用不同订单号预留。" />
                </el-form-item> -->
                <el-form-item label="支付方式" prop="pay_way">
                    <el-radio-group v-model="formData.pay_way">
                        <el-radio label="2">微信支付</el-radio>
                        <el-radio label="3">支付宝支付</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="支付状态" prop="pay_status">
                    <el-radio-group v-model="formData.pay_status">
                        <el-radio label="1">待支付</el-radio>
                        <el-radio label="2">已支付</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="支付时间" prop="pay_time">
                    <el-input v-model="formData.pay_time" clearable placeholder="请输入支付时间" />
                </el-form-item> -->
                <el-form-item label="支付金额" prop="order_amount">
                    <el-input v-model="formData.order_amount" clearable placeholder="请输入支付金额" />
                </el-form-item>
                <!-- <el-form-item label="终端" prop="order_terminal">
                    <el-input v-model="formData.order_terminal" clearable placeholder="请输入终端" />
                </el-form-item>
                <el-form-item label="第三方平台交易流水号" prop="transaction_id">
                    <el-input v-model="formData.transaction_id" clearable placeholder="请输入第三方平台交易流水号" />
                </el-form-item> -->
                <el-form-item label="退款状态" prop="refund_status">
                    <el-radio-group v-model="formData.refund_status">
                        <el-radio label="0">未退款</el-radio>
                        <el-radio label="1">已退款</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="退款交易流水号" prop="refund_transaction_id">
                    <el-input v-model="formData.refund_transaction_id" clearable placeholder="请输入退款交易流水号" />
                </el-form-item>
                <el-form-item label="酒店id" prop="hotel_id">
                    <el-input v-model="formData.hotel_id" clearable placeholder="请输入酒店id" />
                </el-form-item> -->
                <!-- <el-form-item label="房间id" prop="room_id">
                    <el-input v-model="formData.room_id" clearable placeholder="请输入房间id" />
                </el-form-item> -->
                <!-- <el-form-item label="房间数" prop="number">
                    <el-input v-model="formData.number" clearable placeholder="请输入房间数" />
                </el-form-item>
                <el-form-item label="天数" prop="day">
                    <el-input v-model="formData.day" clearable placeholder="请输入天数" />
                </el-form-item> -->
                <!-- <el-form-item label="预定开始时间" prop="start_time">
                    <el-input v-model="formData.start_time" clearable placeholder="请输入预定开始时间" />
                </el-form-item>
                <el-form-item label="预定结束时间" prop="end_time">
                    <el-input v-model="formData.end_time" clearable placeholder="请输入预定结束时间" />
                </el-form-item> -->
                <el-form-item label="联系手机号" prop="phone">
                    <el-input v-model="formData.phone" clearable placeholder="请输入联系手机号" />
                </el-form-item>
                <el-form-item label="联系人" prop="name">
                    <el-input v-model="formData.name" clearable placeholder="请输入联系人" />
                </el-form-item>
                <!-- <el-form-item label="订单状态 1正常 0 取消" prop="status">
                    <el-input v-model="formData.status" clearable placeholder="请输入订单状态 1正常 0 取消" />
                </el-form-item> -->

            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="orderEdit">
import { orderDetail } from '@/api/order'
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')


// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑订单表' : '新增订单表'
})

// 表单数据
const formData = reactive({
    id: '',
    sn: '',
    user_id: '',
    pay_sn: '',
    pay_way: '2',
    pay_status: '1',
    pay_time: '',
    order_amount: '',
    order_terminal: '',
    transaction_id: '',
    refund_status: '0',
    refund_transaction_id: '',
    hotel_id: '',
    room_id: '',
    number: '',
    day: '',
    start_time: '',
    end_time: '',
    phone: '',
    name: '',
    status: '1',

})


// 表单验证
const formRules = reactive<any>({
    sn: [{
        required: true,
        message: '请输入订单编号',
        trigger: ['blur']
    }],
    user_id: [{
        required: true,
        message: '请输入用户id',
        trigger: ['blur']
    }],
    pay_way: [{
        required: true,
        message: '请选择支付方式',
        trigger: ['change']
    }],
    pay_status: [{
        required: true,
        message: '请选择支付状态',
        trigger: ['change']
    }],
    order_amount: [{
        required: true,
        message: '请输入支付金额',
        trigger: ['blur']
    }],
})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    // 先重置所有字段为默认值
    // Object.keys(formData).forEach(key => {
    //     //@ts-ignore
    //     formData[key] = formData[key] === '2' || formData[key] === '1' || formData[key] === '0' 
    //         ? formData[key] 
    //         : ''
    // })
    
    // 设置新数据
    Object.keys(formData).forEach(key => {
        if (data[key] !== null && data[key] !== undefined) {
            //@ts-ignore
            formData[key] = String(data[key])
        }
    })
    
    console.log('formData==================', toRaw(formData))
}

const getDetail = async (row: Record<string, any>) => {
    const data = await orderDetail({
        id: row.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    
}

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}



defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
